<script setup lang="ts">
import {computed, getCurrentInstance, ref, toRef} from 'vue'
import {isClient, useClipboard, useToggle} from '@vueuse/core'
import {useLang} from '../composables/lang'
import {useSourceCode} from '../composables/source-code'
import demoBlockLocale from '../i18n/component/demo-block.json'

import Example from './demo/vp-example.vue'
import SourceCode from './demo/vp-source-code.vue'

const props = defineProps<{
  demos: object
  source: string
  path: string
  rawSource: string
  description?: string
}>()

const vm = getCurrentInstance()!
const locale = computed(() => demoBlockLocale[lang.value])

const {copy, isSupported} = useClipboard({
  source: decodeURIComponent(props.rawSource),
  read: false,
})

const [sourceVisible, toggleSourceVisible] = useToggle()
const lang = useLang()
const demoSourceUrl = useSourceCode(toRef(props, 'path'))

const sourceCodeRef = ref<HTMLButtonElement>()
const formatPathDemos = computed(() => {
  const demos = {}
  Object.keys(props.demos).forEach((key) => {
    demos[key.replace('../../examples/', '').replace('.vue', '')] =
        props.demos[key].default
  })

  return demos
})

const decodedDescription = computed(() =>
    decodeURIComponent(props.description!)
)

const onSourceVisibleKeydown = (e: KeyboardEvent) => {
  if (['Enter', 'Space'].includes(e.code)) {
    e.preventDefault()
    toggleSourceVisible(false)
    sourceCodeRef.value?.focus()
  }
}

const copyCode = async () => {
  if (!isSupported) {
  }
  try {
    await copy()
  } catch (e: any) {
  }
}
</script>

<template>
  <ClientOnly>
    <!-- danger here DO NOT USE INLINE SCRIPT TAG -->
    <p text="sm" v-html="decodedDescription"/>

    <div class="example">
      <Example :file="path" :demo="formatPathDemos[path]"/>
      <div class="op-btns">
       <span
           aria-label="复制代码"
           class="op-btn"
           tabindex="0"
           role="button"
           @click="copyCode"
           @keydown.prevent.enter="copyCode"
           @keydown.prevent.space="copyCode"
       >复制</span>
        <button
            ref="sourceCodeRef"
            :aria-label="
              sourceVisible ? '收起' : '展开'
            "
            class="reset-btn op-btn"
            @click="toggleSourceVisible()"
        >
          {{ sourceVisible ? '收起' : '展开' }}
        </button>
        <a
            :href="demoSourceUrl"
            :aria-label="locale['edit-on-gitee']"
            rel="noreferrer noopener"
            target="_blank"
        >
          编辑
        </a>
      </div>
      <Transition name="ikun-fade-in-linear">
        <SourceCode v-show="sourceVisible" :source="source"/>
      </Transition>
      <Transition name="ikun-fade-in-linear">
        <div
            v-show="sourceVisible"
            class="example-float-control"
            tabindex="0"
            role="button"
            @click="toggleSourceVisible(false)"
            @keydown="onSourceVisibleKeydown"
        >
          <span>收起</span>
        </div>
      </Transition>
    </div>
  </ClientOnly>
</template>

<style scoped lang="scss">
.example {
  border: 1px solid var(--border-color);
  border-radius: var(--ikun-border-radius-base);

  .op-btns {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 2.5rem;
    border-top: 1px solid var(--border-color);

    .op-btn {
      margin: 0 0.5rem;
      cursor: pointer;
      color: var(--text-color-lighter);
      transition: 0.2s;

      &.gitee a {
        transition: 0.2s;
        color: var(--text-color-lighter);

        &:hover {
          color: var(--text-color);
        }
      }
    }
  }

  &-float-control {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--border-color);
    height: 44px;
    box-sizing: border-box;
    background-color: var(--bg-color, #fff);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-top: -1px;
    color: var(--ikun-text-color-secondary);
    cursor: pointer;
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;

    span {
      font-size: 14px;
      margin-left: 10px;
    }

    &:hover {
      color: var(--ikun-color-primary);
    }
  }
}
</style>
